<script setup lang="ts">
import { getUserJackListAPI, getUserScanListAPI } from '@/api/account'
import { useMemberStore } from '@/stores'
import type { KpcodeBarcodeScanEntity, UserJackItem } from '@/types/member'
import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import NoList from '@/components/NoList.vue'

const memberStore = useMemberStore()
// tabs 数据
const orderTabs = ref([
  { orderState: 0, title: '我的扫码' },
  { orderState: 1, title: '我的中奖' },
])
// 高亮下标
const activeIndex = ref(0)

// 获取我的扫码列表
const scanList = ref<KpcodeBarcodeScanEntity[]>([])
const getUserScanList = async () => {
  if (memberStore.profile.userId) {
    const res = await getUserScanListAPI(memberStore.profile.userId)
    scanList.value = res.data
  }
}

// 获取我的中奖列表
const wingList = ref<UserJackItem[]>([])
const getUserBarcodeScanList = async () => {
  if (memberStore.profile.userId) {
    const res = await getUserJackListAPI(memberStore.profile.userId)
    wingList.value = res.data
  }
}

onLoad(() => {
  getUserScanList()
  getUserBarcodeScanList()
})
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text
        class="item"
        v-for="(item, index) in orderTabs"
        :key="item.title"
        @tap="activeIndex = index"
      >
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex * 50 + 10 + '%' }"></view>
    </view>
    <!-- 我的扫码 -->
    <template v-if="activeIndex == 0">
      <view class="choujiang" v-if="scanList.length > 0">
        <uni-list-item
          :title="'商家：' + item.actBusName"
          :note="'扫码时间：' + item.scannedTime"
          showArrow
          :rightText="
            item.status == '4'
              ? '待中奖'
              : item.status == '5'
              ? '未中奖'
              : item.status == '6'
              ? '已中奖'
              : '已过期'
          "
          v-for="item in scanList"
          :key="item.id"
          :to="'/pages/prizeDetail/prizeDetail?id=' + item.id + '&type=1'"
        />
      </view>
      <no-list v-else />
    </template>
    <!-- 我的抽奖 -->
    <template v-if="activeIndex == 1">
      <view class="choujiang" v-if="wingList.length > 0">
        <navigator
          class="item"
          v-for="item in wingList"
          :key="item.id"
          :url="'/pages/prizeDetail/prizeDetail?id=' + item.scanId + '&type=2'"
        >
          <view class="left">
            <view class="company" v-if="item.business">{{ item.business ? item.business.name : '暂无名称' }}</view>
            <view class="jackGrade">{{ item.jackGrade }}</view>
            <view class="code">{{ item.scanNo }}</view>
            <view class="time">{{ item.openJackTime }}</view>
          </view>
          <view class="right">
            <text class="status">{{
              item.status == '1'
                ? '中奖'
                : item.status == '2'
                ? '完成兑奖'
                : item.status == '3'
                ? '兑奖过期'
                : item.status == '4'
                ? '作废'
                : '兑奖审核通过'
            }}</text>
            <uni-icons type="right" color="#ddd" size="12" />
          </view>
        </navigator>
      </view>
      <no-list v-else />
    </template>
  </view>
</template>

<style lang="scss" scoped>
// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}
.choujiang {
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #efefef;
    padding: 10px 15px;
    .left {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      view {
        font-size: 13px;
        margin-top: 5px;
        margin-bottom: 5px;
      }
      .company {
        width: 50%;
      }
      .code {
        color: #999;
        margin-right: 20px;
      }
      .time {
        color: #999;
      }
      .jackGrade {
        width: 50%;
      }
    }
    .right {
      width: 80px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .status {
        font-size: 13px;
        margin-right: 10px;
      }
    }
  }
}
</style>
